<template>
  <div style="width: 100%; height: 100%">
    <div id="map" class="map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import MultiPoint from 'ol/geom/MultiPoint';
import Polygon from 'ol/geom/Polygon';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import ImageLayer from 'ol/layer/Image';
import ImageStatic from 'ol/source/ImageStatic';

import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import Text from 'ol/style/Text';
import Icon from 'ol/style/Icon';
import Fill from 'ol/style/Fill';

import {defaults, Draw, Snap, Modify, Select} from "ol/interaction";

export default {
    name: 'OpenLayersMap',
    components: {},
    data() {
        return {
            map: null,
            keyword: null
        };
    },
    mounted() {
        setTimeout(() => {
            this.initMap();
        }, 500);
    },
    methods: {
        initMap() {

            // 普通图片URL
            const imageUrl = '/img/bianpo.jpg';

            // 图片大小
            const size = [2440, 1728];

            // 放大倍率
            const multiplier = 10000 / 2;

            // left-bottom right-top
            const extent = [0, 0, size[0] * multiplier, size[1] * multiplier];
            // center
            const center = [extent[2] / 2, extent[3] / 2];

            // 创建 ImageLayer 并添加到地图
            const imageLayer = new ImageLayer({
                source: new ImageStatic({
                    url: imageUrl,
                    imageExtent: extent,
                    imageSize: size,
                })
            });

            // 背景样式
            let bg_style = new Style({
                stroke: new Stroke({
                    color: 'blue',
                    width: 1
                }),
                fill: new Fill({
                    color: 'rgba(255, 255, 255, 0.5)'
                })
            });

            //背景数据
            let bg_feature = new Feature({
                geometry: new Polygon([
                    [[extent[0], extent[3]], [extent[0], extent[1]], [extent[2], extent[1]], [extent[2], extent[3]]]
                ])
            });

            bg_feature.setStyle(bg_style);

            // 背景图层
            let bg_vector = new LayerVector({
                source: new SourceVector()
            });
            bg_vector.getSource().addFeature(bg_feature);


            // 数据
            let layerVector = new LayerVector({
                source: new SourceVector()
            });

            let map = new Map({
                view: new View({
                    center: center,
                    zoom: 4
                }),
                layers: [
                    imageLayer
                    , bg_vector
                    , layerVector
                ],
                target: 'map',
            });

            this.map = map;

            // GNSS
            // let icon ="";
            // 钢筋计
            // let icon ="";
            // 倾角仪
            let icon = "";

            let background = "";

            //样式
            let iconStyle = [
                new Style({
                    //背景图标
                    image: new Icon({
                        src: background
                    })
                    // 文本样式
                    , text: new Text({
                        text: '传感器',
                        offsetY: '16',
                        textAlign: "center",
                        font: '12px serif',
                        fill: new Fill({
                            color: '#FFF'
                        })
                        , backgroundFill: new Fill({
                            color: 'rgba(0, 0, 0, 1)', // 背景颜色
                        }),
                    })
                })
                , new Style({
                    //背景图标
                    image: new Icon({
                        src: icon
                        , anchorOrigin: 'top-center'
                        , size: [30, 148]
                        , scale: 0.5
                    })
                })
            ];

            //特征点
            let pointFeature = new Feature({
                geometry: new MultiPoint([[4187239.80,5234798.35], [6682144.40, 5234798.35], [9186832.95, 5234798.35]])
            });

            pointFeature.setStyle(iconStyle);

            layerVector.getSource().addFeature(pointFeature);

            const modify = new Modify({
                source: layerVector.getSource()
            });

            // 可编辑
            map.addInteraction(modify);

            map.on('click', function (evt) {
                let coordinate = evt.coordinate;

                console.log('click: ' + coordinate);

                // map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
                //     const geo = feature.getGeometry();
                //     if (geo instanceof MultiPoint) {
                //         Layers.succeed('功能建设中！');
                //     }
                // });
            });
        }
    },
};
</script>

<style>
.map {
    width: 100%;
    height: 400px;
}
</style>